<template>
    <div class="contrast el-message-box__wrapper" id="contrast">
      <div class="contrast_cont el-message-box">
        <div class="lt_rt">
          <div class="lt_ct">
            <div class="top">
              <span class="font16">{{detailInfo.contestDetection.brandName}}</span>
              <span class="font12">{{detailInfo.contestDetection.dictIdLtype}}</span>
              <span class="font12">{{detailInfo.contestDetection.posCode}}</span>
              <!-- <span><img src="@/assets/images/icon5_03.png" alt="">收藏</span> -->
            </div>
            <div class="cents">
              <div class="cents_s">
                <div class="cout_list" >
                  <div class="gallery-top-box">
                  <div class="swiper-container gallery-top">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                          <img  @click="viewPicture(ImgPath+detailInfo.contestDetection.lumImage)" :src="ImgPath+detailInfo.contestDetection.lumImage" alt="">
                        </div>  
                        <template v-for="(img,index) in detailInfo.storageContestDetectionList">
                          <div class="swiper-slide" v-if="img.pseuColor != null && img.pseuColor != ''">
                            <img @click="viewPicture(ImgPath+img.pseuColor)" :src="ImgPath+img.pseuColor"  alt="">
                            <span class="surface" v-show="detailInfo.storageContestDetectionList.length>1  && (detailInfo.contestDetection.contestTypeStr == '窗框'||detailInfo.contestDetection.contestTypeStr == '复合面')">{{img.rgbwa}}{{img.surfaceType}}面</span>
                          </div>  
                          <div class="swiper-slide" v-if="img.viewPhoto != null && img.viewPhoto != ''">
                            <img @click="viewPicture(ImgPath+img.viewPhoto)" :src="ImgPath+img.viewPhoto"  alt="">
                            <span class="surface" v-show="detailInfo.storageContestDetectionList.length>1  && (detailInfo.contestDetection.contestTypeStr == '窗框'||detailInfo.contestDetection.contestTypeStr == '复合面')">{{img.rgbwa}}{{img.surfaceType}}面</span>
                          </div>  
                          <div class="swiper-slide" v-if="img.lightIntensity != null && img.lightIntensity != ''">
                            <img @click="viewPicture(ImgPath+img.lightIntensity)" :src="ImgPath+img.lightIntensity"  alt="">
                          </div> 
                        </template>
                    </div>
                  </div>
                  <div id="oiij"> 
                  <div class="swiper-button-next swiper-button-white"></div> 
                    <div class="swiper-button-prev swiper-button-white"></div>
                    </div>
                </div>
                </div>
              </div>
              <div class="cent_ss">
                <div class="gallery-thumbs-box">
                    <div class="swiper-container gallery-thumbs">
                      <div class="swiper-wrapper">
                        <div class="swiper-slide">
                          <img :src="ImgPath+detailInfo.contestDetection.lumImage" alt="" height="50" width="50">
                        </div>  
                        <template v-for="(img,index) in detailInfo.storageContestDetectionList">
                          <div class="swiper-slide" v-if="img.pseuColor != null && img.pseuColor != ''">
                            <img :src="ImgPath+img.pseuColor" height="50" width="50" alt="">
                          </div>  
                          
                          <div class="swiper-slide" v-if="img.viewPhoto != null && img.viewPhoto != ''">
                            <img :src="ImgPath+img.viewPhoto" height="50" width="50" alt="">
                          </div>  

                          <div class="swiper-slide" v-if="img.lightIntensity != null && img.lightIntensity != ''">
                            <img :src="ImgPath+img.lightIntensity" height="50" width="50" alt="">
                          </div>
                        </template>
                      </div>
                      
                    </div>
                  </div>
              </div>
            </div>
            <div class="bom">
              <el-button v-show="detailInfo.contestStorageExaVo.labelContent != '' && detailInfo.contestStorageExaVo.labelContent != null">{{detailInfo.contestStorageExaVo.labelContent}}</el-button>
            </div>
            
                    <div class="bottm">
                        <a v-show="detailInfo.contestDetection.iesfile != null && detailInfo.contestDetection.iesfile != ''" :href="getDownLoadFileUrl(detailInfo.contestDetection.iesfile,detailInfo.contestDetection.posCode)" :download="detailInfo.contestDetection.posCode" style="display:inline;">IES 下载</a>
                        <!-- <el-button v-show="detailInfo.contestDetection.iesfile != null && detailInfo.contestDetection.iesfile != ''" @click="downloadUrl(detailInfo.contestDetection.iesfile,detailInfo.contestDetection.posCode)" style="margin-left:10px;">IES 下载</el-button> -->
                        <!-- <el-button v-show="detailInfo.contestDetection.isPilotLamp == 1" @click="onkeyTryLamp(detailInfo)" style="margin-left:10px;">一键试灯</el-button> -->
                        <a v-show="detailInfo.contestDetection.isPilotLamp == 1" :href="'LampOnline://Id='+detailInfo.contestDetection.posCode+'&detectionId='+detailInfo.contestStorageExaVo.id" style="display:inline;margin-left:10px;">一键试灯</a>
                        <!-- <el-button>收藏</el-button> -->
                    </div>
          </div>   
          <div class="rt_ct">
            <i class="el-icon-close" @click="contrastShowHide()"></i>
            <div class="cont">
              <div class="xian">
                  <div class="font16">标称参数 / Nominal parameter </div>
              </div>
                 <ul class="wid100">
                  <li><span>功&nbsp;&nbsp;率：</span>{{detailInfo.contestDetection.lumPower != null ? detailInfo.contestDetection.lumPower + "W" : '-'}}</li>
                  <li><span>光源类型：</span>{{detailInfo.contestDetection.dictIdLitype != null ? detailInfo.contestDetection.dictIdLitype : '-'}}</li>
                  <li><span>光束角：</span>{{detailInfo.contestDetection.lumAngle != '' ? detailInfo.contestDetection.lumAngle : '-'}}</li>
                  <li><span>色&nbsp;&nbsp;温：</span>{{detailInfo.contestDetection.lumColorTempe != null ? detailInfo.contestDetection.lumColorTempe +"K" : '-'}} <span v-show="detailInfo.contestStorageExaVo.lumColorTempe != '' && detailInfo.contestStorageExaVo.lumColorTempe != null">（{{detailInfo.contestStorageExaVo.lumColorTempe}}）</span></li>
                  <li><span>灯具型号：</span><span>{{detailInfo.contestDetection.lumModel}}</span></li>
                  <li><span>IP等级：</span>{{detailInfo.contestDetection.ipGrade != null ? detailInfo.contestDetection.ipGrade : '-'}} <span v-show="detailInfo.contestStorageExaVo.exaIpLevel != '' && detailInfo.contestStorageExaVo.exaIpLevel != null">（{{detailInfo.contestStorageExaVo.exaIpLevel}}）</span></li>
                  <li><span>灯具尺寸：</span>
                    <span v-show="detailInfo.contestDetection.widthNs === null"> Φ</span>
                    <span v-show="detailInfo.contestDetection.longNs != null">{{detailInfo.contestDetection.longNs}}</span>
                    <span v-show="detailInfo.contestDetection.widthNs != null"> * {{detailInfo.contestDetection.widthNs}}</span>
                    <span v-show="detailInfo.contestDetection.heightNs != null"> * <span v-show="detailInfo.contestDetection.widthNs === null"> H</span>{{detailInfo.contestDetection.heightNs}}</span>
                    <span v-show="detailInfo.contestDetection.longNs != null || detailInfo.contestDetection.heightNs != null || detailInfo.contestDetection.widthNs != null">mm</span>
                    <span v-show="detailInfo.contestStorageExaVo.exaLength != null ">（{{detailInfo.contestStorageExaVo.exaLength}}）</span>
                   </li>
                  <li><span>电&nbsp;&nbsp;压：</span>{{detailInfo.contestDetection.lumVoltage != null ? detailInfo.contestDetection.lumVoltage + 'V' : '-'}} <span v-show="detailInfo.contestStorageExaVo.exaPower != '' && detailInfo.contestStorageExaVo.exaPower != null">（{{detailInfo.contestStorageExaVo.exaPower}}）</span></li>
                  <li>
                    <span>尺寸(含支架)：</span>
                    <span v-show="detailInfo.contestDetection.widthS === null">Φ</span>
                    <span v-show="detailInfo.contestDetection.longS != null">{{detailInfo.contestDetection.longS}}</span>
                    <span v-show="detailInfo.contestDetection.widthS != null"> * {{detailInfo.contestDetection.widthS}}</span>
                    <span v-show="detailInfo.contestDetection.heightS != null"> * <span v-show="detailInfo.contestDetection.widthS === null">H</span>{{detailInfo.contestDetection.heightS}}</span>
                    <span v-show="detailInfo.contestDetection.longS != null || detailInfo.contestDetection.heightS != null || detailInfo.contestDetection.widthS != null">mm</span>
                  </li>
                  <li><span>控制段数: </span>{{detailInfo.contestStorageExaVo.exaControl != null ? '（'+detailInfo.contestStorageExaVo.exaControl+')' : '-'}}</li>
                  <li><span>可配附件: </span>{{detailInfo.contestStorageExaVo.exaAttachment != null ? '（'+detailInfo.contestStorageExaVo.exaAttachment +"）" : '-'}}</li>
                  <li><span>参考价：</span><template v-if="detailInfo.contestDetection.authorizedPrice != null && detailInfo.contestDetection.authorizedPrice !='' && detailInfo.contestDetection.authorizedPrice != 0">{{detailInfo.contestDetection.authorizedPrice}}元</template><template v-else>-</template></li>
                </ul>
            </div>
            <div class="cont">
                <div class="xian">
                  <div class="font16">实测数据 / Measured data </div>
                    <div class="xian_rt">来源：
                      <span v-if="detailInfo.contestDetection.dataType==1">典型检测</span>
                      <span v-if="detailInfo.contestDetection.dataType==2">项目检测</span>
                      <span v-if="detailInfo.contestDetection.dataType==3">厂家标称值</span>
                    </div>
                </div>
                  <ul class="wid100">
                    <li><span>功&nbsp;&nbsp;率：</span>{{detailInfo.contestDetection.power != null ? detailInfo.contestDetection.power + "W" : '-'}}</li>
                    <li><span>电&nbsp;&nbsp;压：</span>{{detailInfo.contestDetection.voltage != null ? detailInfo.contestDetection.voltage +"V" :'-'}}</li>
                    <!-- <li><span>色&nbsp;&nbsp;温：</span>{{detailInfo.contestDetection.colorTempe != null ? detailInfo.contestDetection.colorTempe + 'K' : '-'}}</li> -->
                    <li><span>功率因数：</span>{{detailInfo.contestDetection.powerFactor != null ? detailInfo.contestDetection.powerFactor : '-'}}</li>
                    <li><span>光束角：</span>{{detailInfo.contestDetection.angle1 != null ? detailInfo.contestDetection.angle1 +'°' : '-'}} * {{detailInfo.contestDetection.angle2 != null ? detailInfo.contestDetection.angle2 + '°' : '-'}}</li>
                    <li><span>单白Ra：</span>{{detailInfo.contestDetection.colorXszs != null ? detailInfo.contestDetection.colorXszs : '-'}}</li>
                    <li><span>单白R9：</span>{{detailInfo.contestDetection.colorXszsR9 != null ? detailInfo.contestDetection.colorXszsR9 : '-'}}</li>
                    <li><span>色容差：</span>{{detailInfo.contestDetection.sdcm != null ? detailInfo.contestDetection.sdcm + 'SDCM' : '-'}}</li>
                    <li><span>光通量：</span>{{detailInfo.contestDetection.opticGtl != null ? detailInfo.contestDetection.opticGtl + 'lm' : '-'}}</li>
                    <li><span>IP等级：</span>{{detailInfo.contestDetection.anWater == 'P' ? detailInfo.contestDetection.ipGrade : detailInfo.contestDetection.anWater != null ? detailInfo.contestDetection.anWater : '-'}}</li>
                    <li><span>防盐雾：</span>{{detailInfo.contestDetection.anSaltfog != null ? detailInfo.contestDetection.anSaltfog : '-'}}</li>
                  </ul>
            </div>
                <p class="p1">{{detailInfo.contestDetection.contestTypeStr}} 
                  <span v-show="detailInfo.contestDetection.sH != null">H：{{detailInfo.contestDetection.sH}}m</span> &nbsp; 
                  <span v-show="detailInfo.contestDetection.sW != null">W：{{detailInfo.contestDetection.sW}}m</span> &nbsp; 
                  <span v-show="detailInfo.contestDetection.sW1 != null">W1：{{detailInfo.contestDetection.sW1}}m</span> &nbsp; 
                  <span v-show="detailInfo.contestDetection.sW2 != null">W2：{{detailInfo.contestDetection.sW2}}m</span> &nbsp; 
                  <span v-show="detailInfo.storageContestDetectionList.length > 0 && detailInfo.storageContestDetectionList[0].lumSize != null && detailInfo.storageContestDetectionList[0].lumSize != ''">D：{{detailInfo.storageContestDetectionList[0].lumSize}}m</span> &nbsp; 
                  <span v-show="detailInfo.storageContestDetectionList.length > 0 && detailInfo.storageContestDetectionList[0].testAngle != null && detailInfo.storageContestDetectionList[0].testAngle != ''">测试角度：{{detailInfo.storageContestDetectionList[0].testAngle}}°</span> &nbsp; 
                  <!-- {{detailInfo.contestDetection.faceInfo}} -->
                </p>
                <table border='1' style="max-height:101px" v-if="detailInfo.contestDetection.contestTypeStr == '控光点光源' || detailInfo.contestDetection.contestTypeStr == '不控光点光源' || detailInfo.contestDetection.contestTypeStr == '远视点光源'"> <!-- 电源-->
                  <thead>
                    <tr v-if="detailInfo.contestDetection.contestTypeStr == '控光点光源'">
                      <td>色温(K)</td>
                      <td>0°</td>
                      <td>上30°</td>
                      <td>下60°</td>
                      <td>左60°</td>
                      <td>右60°</td>
                    </tr>
                    <tr v-else-if="detailInfo.contestDetection.contestTypeStr == '不控光点光源'">
                      <td>色温(K)</td>
                      <td>0°</td>
                      <td>上60°</td>
                      <td>下60°</td>
                      <td>左60°</td>
                      <td>右60°</td>
                    </tr>
                    <tr v-else-if="detailInfo.contestDetection.contestTypeStr == '远视点光源'">
                      <td>色温(K)</td>
                      <td>上30°</td>
                      <td>下45°</td>
                      <td>下10°</td>
                      <td>下10° 左60°</td>
                      <td>下10° 右60°</td>
                    </tr>
                  </thead>
                  <tbody v-if="detailInfo.contestDetection.contestTypeStr == '控光点光源'">
                    <tr v-for="ls in detailInfo.storageContestDetectionList" :key="ls.id">
                      <td>{{ls.colorTempe}}</td>
                      <td>{{ls.lightIntensity1}}</td>
                      <td>{{ls.lightIntensity6}}</td>
                      <td>{{ls.lightIntensity4}}</td>
                      <td>{{ls.lightIntensity5}}</td>
                      <td>{{ls.lightIntensity2}}</td>
                    </tr>
                  </tbody>
                  <tbody v-else-if="detailInfo.contestDetection.contestTypeStr == '不控光点光源'">
                    <tr v-for="ls in detailInfo.storageContestDetectionList" :key="ls.id">
                      <td>{{ls.colorTempe}}</td>
                      <td>{{ls.lightIntensity1}}</td>
                      <td>{{ls.lightIntensity8}}</td>
                      <td>{{ls.lightIntensity4}}</td>
                      <td>{{ls.lightIntensity5}}</td>
                      <td>{{ls.lightIntensity2}}</td>
                    </tr>
                  </tbody>
                  <tbody v-else-if="detailInfo.contestDetection.contestTypeStr == '远视点光源'">
                    <tr v-for="ls in detailInfo.storageContestDetectionList" :key="ls.id">
                      <td>{{ls.colorTempe}}</td>
                      <td>{{ls.lightIntensity6}}</td>
                      <td>{{ls.lightIntensity3}}</td>
                      <td>{{ls.lightIntensity7}}</td>
                      <td>{{ls.lightIntensity9}}</td>
                      <td>{{ls.lightIntensity10}}</td>
                    </tr>
                  </tbody>
                </table>
                <table v-else border='1' style="max-height:101px">
                  <tr>
                    <td v-show="detailInfo.contestDetection.contestTypeStr == '窗框'||detailInfo.contestDetection.contestTypeStr == '复合面'">A/B面</td>
                    <td v-show="detailInfo.contestDetection.contestTypeStr == '窗框'||detailInfo.contestDetection.contestTypeStr == '复合面' ? detailInfo.storageContestDetectionList.length>2 : detailInfo.storageContestDetectionList.length>1">检测模式</td>
                    <td width='50' v-show="detailInfo.contestDetection.contestTypeStr == '窗框'||detailInfo.contestDetection.contestTypeStr == '复合面' ? detailInfo.storageContestDetectionList.length>2 : detailInfo.storageContestDetectionList.length>1">功率(W)</td>
                    <td width='40'>色温(K)</td>
                    <td width='50' v-show="detailInfo.contestDetection.contestTypeStr == '窗框'||detailInfo.contestDetection.contestTypeStr == '复合面' ? detailInfo.storageContestDetectionList.length>2 : detailInfo.storageContestDetectionList.length>1">波长(nm)</td>
                    <td v-show="detailInfo.contestDetection.contestTypeStr == '窗框'||detailInfo.contestDetection.contestTypeStr == '复合面' ? detailInfo.storageContestDetectionList.length>2 : detailInfo.storageContestDetectionList.length>1">色坐标</td>
                    <td>平均亮度<br>(cd/㎡)</td>
                    <td>最大亮度<br>(cd/㎡)</td>
                    <td>最小亮度<br>(cd/㎡)</td>
                    <td>均匀度</td>
                  </tr>
                  <tr v-for="ls in detailInfo.storageContestDetectionList" :key="ls.id">
                    <td v-show="detailInfo.contestDetection.contestTypeStr == '窗框'||detailInfo.contestDetection.contestTypeStr == '复合面'">{{ls.surfaceType}}</td>
                    <td v-show="detailInfo.contestDetection.contestTypeStr == '窗框'||detailInfo.contestDetection.contestTypeStr == '复合面' ? detailInfo.storageContestDetectionList.length>2 : detailInfo.storageContestDetectionList.length>1">{{ls.rgbwa}}</td>
                    <td v-show="detailInfo.contestDetection.contestTypeStr == '窗框'||detailInfo.contestDetection.contestTypeStr == '复合面' ? detailInfo.storageContestDetectionList.length>2 : detailInfo.storageContestDetectionList.length>1">{{ls.power}}</td>
                    <td>{{ls.colorTempe}}</td>
                    <td v-show="detailInfo.contestDetection.contestTypeStr == '窗框'||detailInfo.contestDetection.contestTypeStr == '复合面' ? detailInfo.storageContestDetectionList.length>2 : detailInfo.storageContestDetectionList.length>1">{{ls.colorZbc}}</td>
                    <td v-show="detailInfo.contestDetection.contestTypeStr == '窗框'||detailInfo.contestDetection.contestTypeStr == '复合面' ? detailInfo.storageContestDetectionList.length>2 : detailInfo.storageContestDetectionList.length>1">{{ls.spzb}}</td>
                    <td>{{ls.lightnessAve}}</td>
                    <td>{{ls.lightnessMax}}</td>
                    <td>{{ls.lightness}}</td>
                    <td>{{ls.evenness}}</td>
                  </tr>
                </table>
            </div>
          </div>
      </div>
      
       <!--查看图片 -->
      <el-dialog :visible.sync="showPic" :modal="false" v-dialogDrag custom-class="dee">
        <img :src="showPicUrl" />
      </el-dialog>
    </div>
</template>
<script>
import $ from 'jquery'
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
export default {
    data(){
        return{
          showPic:false,
          showPicUrl:'',
            detailInfo:{ //详情模型
                contestDetection:{
                },
                contestStorageExaVo:{
                },
                storageContestDetectionList:[
                {
                    lumSize:'',
                }
                ]
            },
        }
    },
    mounted(){
      var shiyi = new Swiper('.shiyi', {
         direction: 'vertical',
         slidesPerView : 3,
        navigation: {
          nextEl: '.sc .swiper-button-next',
          prevEl: '.sc .swiper-button-prev',
        },
      });
    },
    methods:{
      
    viewPicture(url){
      this.showPic = true
      this.showPicUrl = url
    },
      getColorTempStr(val){
        if(val == null){
          return "";
        }
        if(isNaN(val)){
          return val;
        }else{
          var temp = parseFloat(val);
          if(temp >= 1000){
            return val + " K"
          }else{
            return val + " nm"
          }
        }
      },
    contrastShowHide(){
      document.getElementById("contrast").classList.remove("active");
      this.scoolingImg(function(e){
        return false;
        e.stopPropagation();
      })
    },
        scoolingImg(){
            var galleryThumbs = new Swiper('.gallery-thumbs', {
                spaceBetween: 4,
                slidesPerView: 6,
                freeMode: true,
                watchSlidesVisibility: true,
                watchSlidesProgress: true,
                
            });
            var galleryTop = new Swiper('.gallery-top', {
                spaceBetween: 0,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                thumbs: {
                swiper: galleryThumbs
                }
            });
        },
        show(id){
          console.log(id)
            let self = this
            this.$http.get('/api/contests/view/'+id,{},function(res){
                if(res.success){
                    self.detailInfo = res.data

                    if(self.detailInfo.contestDetection == null){
                        self.detailInfo.contestDetection = {}
                    }
                    if(self.detailInfo.contestStorageExaVo == null){
                        self.detailInfo.contestStorageExaVo = {}
                    }
                    if(self.detailInfo.storageContestDetectionList == null){
                        self.detailInfo.storageContestDetectionList = []
                    }
                }else{
                    self.$alert(res.message, '提示', {
                        confirmButtonText: '确定',
                        callback: action => {
                        }
                    });
                }
            })
            $("#contrast").addClass("active")
            var list = []
            if(self.detailInfo.contestDetection.lumImage!=''){
                list.push(self.detailInfo.contestDetection.lumImage)
            }
            for(var i = 0;i<self.detailInfo.storageContestDetectionList.length;i++){
                var item = self.detailInfo.storageContestDetectionList[i]
                console.log(item)
                console.log(item.pseuColor)
                if(item.pseuColor != ''){
                list.push(item.pseuColor)
                }
                if(item.viewPhoto != ''){
                list.push(item.viewPhoto)
                }
                if(item.lightIntensity != ''){
                list.push(item.lightIntensity)
                }
            }

            // if(list.length > 1){
                setTimeout(this.scoolingImg,1000);
            // }
            //  if(self.detailInfo.storageContestDetectionList.length > 1){
            //     document.getElementById("oiij").classList.add("active");
            //  }
        },
        getDownLoadFileUrl(url,outputFileName){
          return this.$http.getDownLoadFileUrl(url,outputFileName)
        },
        downloadUrl(url,outputFileName){
          let self = this
            this.$http.get('/api/files/downLoad',{
              fileName:url,
              outputFileName:outputFileName
            },function(res){
              console.log(res)
                if(res.success){
                }
            })
        },
    }
}
</script>
<style  rel="stylesheet/scss" lang="scss">
.contrast{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background: rgba(0,0,0,0.5);
    z-index: -1;
    opacity: 0;
    display: none;
    &.active{
      opacity: 1;
      z-index: 999999;
      display: block;
    }
    .contrast_cont{
        display: inline-block;
        max-width: 1100px;
        max-height: 90vh;
        width: 100%;
        padding-bottom: 10px;
        vertical-align: middle;
        background-color: #fff;
        border-radius: 4px;
        border: 1px solid #ebeef5;
        font-size: 18px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        text-align: left;
        overflow: hidden;
        backface-visibility: hidden;
        padding: 0;
        .lt_rt{
            display: box;
            display: -webkit-box;
            display: -moz-box;
            display: -o-box;
            position: relative;
            .rt_ct{
                width: 50%;
                padding: 10px 20px;
                position: relative;
                table{
                  width: 100%;
                  td{
                    font-size: 14px;
                    text-align: center;
                  }
                } 
                .el-icon-close{
                    float: right;
                   font-size: 20px;
                   cursor: pointer;
                   position: relative;
                }
                .p1{
                  font-size: 12px;
                  margin-bottom: 5px;
                }
                .cont{
                    position: relative;
                    margin-top: 18px;
                     .set{
                         position: absolute;
                         text-align: right;
                         right: 0;
                         top: 70px;
                         color: #333333;
                     }
                    .xian{
                        color: #333333;
                        position: relative;
                        padding: 0px 0 6px;
                        border-bottom: 2px solid #eeeeee;
                        span{
                            position: absolute;
                            right: 0;
                            top: 0;
                            font-size: 14px;
                            cursor: pointer;
                        }
                        .xian_rt{
                            float: right;
                            font-size: 14px;
                             position: absolute;
                            right: 0;
                            top: 0;
                            span{
                                position: initial;
                                color: #208cc6;
                            }
                        }
                    }
                    ul{
                        margin: 1rem 0 2rem;
                        position: relative;
                        li{
                            width: 50%;
                            display: inline-block;
                            font-size: 12px;
                            margin-bottom: 2px;
                            color: #333333;
                            line-height: 1em;
                            margin-right: 0;
                            span:first-child{
                                color: #000;
                                font-weight: bold
                            }
                            span{
                              span{
                                color: #333333 !important;
                                font-weight: 500 !important
                              }
                            }
                        }
                    }
                }
                .bottm{
                    text-align: center;
                        margin-top: 20px;
                    button{
                        background-color: #eeeeee;
                        font-size: 12px;
                            padding: 7px 15px;
                    }

                }   
            }
            .lt_ct{
                width: 50%;
                background-color: #f8f8f8;
                padding: 20px;
                position: relative;
                .top{
                    margin-bottom: 15px;
                    span{
                        color: #666666;
                        margin-right: 12px;
                        &:nth-child(1),&:nth-child(3){
                            color: #208cc6;
                        }
                        &:last-child{
                            float: right;
                            font-size: 12px;
                            margin-right:0;
                            img{
                                position: relative;
                                top: 2px;
                                margin-right: 5px;
                                display: inline-block;
                            }
                        }
                    }
                }
                .cents{
                  position: relative;
                  .cents_s{
                    height: 44vh;
                  }
                    .cout_list{
                      height: 100%;
                      .gallery-thumbs-box,.swiper-container,.swiper-wrapper{
                        height: 100%;
                      }
                      .swiper-slide{
                        height: 100%;
                      }
                        img{
                           max-height: 44vh;
                        }
                    }
                    .cent_ss{
                        overflow: auto;
                        margin-top: 16px;
                        padding: 0 38px;
                        li{
                            display: inline-block;
                            border-radius: 4px;
                            overflow: hidden;
                            margin-right: 10px;
                        }
                    }
                }
                .bom{
                    margin-top: 20px;
                    text-align: center;
                }
            }
        }
    }
}
</style>